Zendeskのアプリ開発で使うツールや、デプロイまでの流れについてまとめてみた

Zendeskでは、ユーザーが独自に開発したアプリを自身のZendesk環境にデプロイすることができ、標準のZendeskにはない様々な機能を追加できます。この記事では、開発に使用するツールや、デプロイまでの流れについてご紹介します。

#Zendesk

入井啓太

2023.04.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、ゲームソリューショングループの入井です。

Zendeskでは、ユーザーが独自に開発したアプリを自身のZendesk環境にデプロイすることができます。これにより、標準のZendeskにはない様々な機能を追加可能です。

例えば、以下のようなことが実現可能です。

標準のUIでは表示されない細かなデータを表示されるようにする
標準UIでは複雑な操作が必要になるユースケースを簡易化する
外部のシステムやSaaSなどをAPI経由でZendeskから操作できるようにする

今回は、Zendeskでオリジナルアプリを開発する際に使用するツールや、Zendesk環境にデプロイするまでの流れを書いていきます。

内容については、公式の開発者向けドキュメントを参考にさせていただきました、

Zendesk Developer Docs

Zendeskのアプリ開発に使用するもの

Zendeskは、オリジナルアプリの開発の役にたつ様々なWeb APIやツールを公開しています。その中でも、アプリ開発の際によく使用することになるものとして、ZCLIとZAFの2つがあります。

ZCLI

Zendesk Command Line Interfaceの略で、アプリのビルドやテスト、デプロイについての機能を提供しています。Zendeskのアプリ開発はNode.js環境上で行うため、このツールもnpmでインストールできるようになっています。CI/CDでテストやデプロイを自動化する際も、このツールを使用します。

例えば、新規プロジェクトを作成する際は以下のようにzcli apps:newコマンドを入力します。プロジェクト情報は対話式で入力していく仕組みとなっています。

Using ZCLI | Zendesk Developer Docs

ZAF

Zendesk Apps frameworkの略で、Zendeskのリソースへのアクセスや、アプリの状態変更検知（アプリの折りたたみ/展開など）などの機能を提供します。

リソースへのアクセスについては、チケット情報の取得や更新機能といった機能のほか、アプリの画面サイズの変更などのような操作も行うことができます。

使用の際は、以下のように生成したクライアントでメソッドを実行します。

var client = ZAFClient.init();
client.invoke('resize', { width: '300px', height: '750px' })

Using the Apps framework | Zendesk Developer Docs

Zendeskアプリ開発の流れ

ここからは、zcli apps:newで作成したオリジナルアプリプロジェクトのテスト〜デプロイまでの流れについて簡単にご紹介します。ツールはZCLIを使用します。

ローカルサーバーの立ち上げによるテスト

zcli apps:serverコマンドを実行することで、開発中のアプリをローカルサーバー上で立ち上げることができます。

ただ、アプリの操作はlocalhost上ではできず、実際のZendesk環境にアプリをアタッチすることが必要です。以下のように、URLにzcli_apps=trueというクエリパラメータをつけてZendeskの画面をブラウザで開くことにより、ローカルで起動したアプリがZendesk環境にアタッチされ、操作することが可能になります。

https://{subdomain}.zendesk.com/agent/tickets/{123}?zcli_apps=true

これにより、開発中のテストやデバッグが可能になります。

ZCLIによるZendesk環境へのデプロイ

zcli apps:createコマンドを実行することで、Zendesk環境に開発したアプリがデプロイされます。なお、デプロイ系のコマンドを実行するためには、事前にzcliでZendeskアカウントの認証を済ませておく必要があります。（参考: Using ZCLI - Authentication | Zendesk Developer Docs）